<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>节点获取</title>
  <script src="../../../static/kaige/js/szload.js"></script>
  <link rel="stylesheet" href="../../../static/kaige/css/iconpick.css">
</head>

<body>
  <script type="text/html" id="dtoolbar">
  <form class="layui-form filter-form" lay-filter="searchform">
      <div class="layui-btn-container">
          <div class="layui-btn-group">
              <button type="button" class="layui-btn layui-btn-sm" lay-event="reload"><i class="fa fa-refresh"></i> 刷新</button>
              <button type="button" class="layui-btn layui-btn-sm" lay-event="open"><i class="fa fa-angle-double-down"></i> 全展开</button>
              <button type="button" class="layui-btn layui-btn-sm" lay-event="close"><i class="fa fa-angle-double-right"></i> 全收缩</button>
          </div>
      </div>
  </form>
</script>
  <div class="jhhj-body">
    <table class="layui-table" id="menuTable" lay-filter="menuTable" lay-size="sm"></table>
  </div>
  <script type="text/html" id="dtrbar">
  <button type="button" class="layui-btn layui-btn-xs" lay-event="editNode" title="编辑"><i class="fa fa-edit"></i></button>
</script>
  <script type="text/html" id="is_menu_td">
  <span class="layui-badge {{ d.is_menu == 1? 'layui-bg-green': 'layui-bg-gray'}}">{{ d.is_menu == 1? '是': '否'}}</span>
</script>
  <script type="text/html" id="is_left_td">
  <input type="checkbox" name="is_left" value="1" lay-skin="switch" lay-text="是|否" data-id="{{d.id}}" data-old="{{ d.is_left }}" lay-filter="is_left" {{ d.is_left == 1 ? 'checked' : '' }} />
</script>
  <script type="text/html" id="is_lock_td">
  <input type="checkbox" name="is_lock" value="1" lay-skin="switch" lay-text="是|否" data-id="{{d.id}}" data-old="{{ d.is_lock }}" lay-filter="is_lock" {{ d.is_lock == 1 ? 'checked' : '' }} />
</script>
  <script type="text/html" id="is_extend_td">
  <input type="checkbox" name="is_extend" value="1" lay-skin="switch" lay-text="是|否" data-id="{{d.id}}" data-old="{{ d.is_extend }}" lay-filter="is_extend" {{ d.is_extend == 1 ? 'checked' : '' }} />
</script>

  <script type="text/html" id="selecttrbar">
  <button type="button" class="layui-btn layui-btn-xs" lay-event="select_pid" title="选择"><i class="fa fa-check"></i></button>
</script>

  <script>
    load_init_js(function () {
      layui.config({
        base: szoa.client.path + '/static/kaige/layuiextend/'
      }).use(['form', 'layer', 'table', 'element', 'treeTable', 'iconpick', 'tableTreeDj', 'kaige'], function () {
        var form = layui.form, layer = layui.layer, table = layui.table, tableTree = layui.tableTreeDj, element = layui.element, $ = layui.$, iconpick = layui.iconpick, kaige = layui.kaige, treeTable = layui.treeTable;
        //图标输出<i>
        function get_icon(a) {
          var b = "";
          a &&
            (-1 < a.indexOf("fa-")
              ? (b = '<i class=\'fa ' + a + '\'></i>')
              : -1 < a.indexOf("icon-")
                ? (b = '<i class=\'iconfont ' + a + '\'></i>')
                : -1 < a.indexOf("layui-icon-")
                  ? (b = '<i class=\'layui-icon ' + a + '\'></i>')
                  : null != a.match(/\//gi) && (b = '<img src=\'' + a + '\' />'));
          return b + " ";
        }
        //获取父节点名称
        function get_pid_name(a, b) { if (a && b) { for (var i = 0; i < a.length; i++) { if (a[i].menu_id == b) { return a[i].name } } } return "" }
        //表格列配置
        const cols = [[
          { field: 'id', title: 'ID', width: 70, align: "center", hide: true }
          , { field: 'name', title: '名称', width: 320 } // 被定义为 展开主键 不能使用 templet
          , { field: 'node', title: '节点', width: 220 }
          , { field: 'title', title: '说明', width: 200 }
          , { field: 'menu_id', title: 'ID', width: 150, hide: true }
          , { field: 'p_menu_id', title: 'PID', width: 150, hide: true }
          , { field: 'sort', title: '排序', edit: 'text', width: 60, align: "center" }
          , { field: 'params', title: '链接参数', width: 100, hide: true }
          , { field: 'is_menu', title: '菜单', width: 90, align: "center", templet: "#is_menu_td" }
          , { field: 'is_left', title: '左侧', width: 110, align: "center", templet: "#is_left_td", sort: true }
          , { field: 'is_extend', title: '默认展开', width: 110, align: "center", templet: "#is_extend_td", sort: true }
          , { field: 'is_lock', title: '锁定', width: 110, align: "center", templet: "#is_lock_td", sort: true }
          , { title: '操作', width: 90, align: 'center', toolbar: '#dtrbar' }
        ]];
        //表格参数配置
        const objTable = {
          elem: '#menuTable'
          , url: "/sys.menu/menulist"
          , cols: cols
          , id: 'menuTable'
          , loading: true
          , height: 'full-10'
          , toolbar: '#dtoolbar'
          , defaultToolbar: ['filter']
          , escape: false
          // , done: function (res, curr, count) {}
        };
        //树型参数配置 （详看默认配置进行更改）
        const objTree = {
          keyId: 'menu_id',
          keyPid: 'p_menu_id',
          defaultShow: true
        }

        //渲染表格
        tableTree.render(objTable, objTree);
        //清除缓存
        tableTree.cache(tableTree.getShowCache(), [])
        //头部工具栏触发事件
        table.on('toolbar(menuTable)', function (obj) {
          //tableTree.getDataOri();
          //const run = tableTree.getRun();
          //const dataIndex = run.dataIndex;
          switch (obj.event) {
            case 'reload':
              location.reload();
              break;
            case 'open':
              tableTree.showAll(objTable);
              break;
            case 'close':
              tableTree.hideAll(objTable);
              break;
          };
        });
        //监听行工具事件
        table.on('tool(menuTable)', function (obj) {
          var that = this;
          var data = obj.data;
          switch (obj.event) {
            case 'editNode':
              bar_edit(data, that);
              break;
          }
        });

        //编辑
        function bar_edit(d, that) {
          szoa.ajax({
            selfurl: szoa.client.path + '/pages/sys/menu/form.html'
            , data: { id: d.id }
            , sign: 1
            , dataType: 'html'
            , success: function (content) {
              layer.open({
                id: 'kaige_form_box',
                type: 1,
                anim: 4,
                area: ['800px', '550px'],
                title: '<i class="layui-icon layui-icon-edit"></i> 编辑',
                maxmin: true,
                content: content,
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                  $('#kaige_form_btn_save').click();
                },
                success: function (layero, index) {
                  // $('#kaige_form_box').css('overflow', 'visible');
                  // 取数据
                  szoa.get('/sys.menu/edit', { id: d.id }, function (res) {
                    if (res.status) {
                      var fd = res.data;
                      // 表单赋值
                      form.val('kaige_form_lay_filter', {
                        "icon": fd.icon
                        , "menu_id": fd.menu_id
                        , "p_menu_id": fd.p_menu_id
                        , "name": fd.name
                        , "params": fd.params
                        , "width": fd.width
                        , "height": fd.height
                        , "node": fd.node
                        , "sort": fd.sort
                        , "is_left": fd.is_left
                        , "is_lock": fd.is_lock
                        , "type": fd.type
                        , "id": fd.id
                        , "status": fd.status
                        , "menu_type": fd.menu_type
                        , "is_menu": fd.is_menu
                        , "is_auth": fd.is_auth
                        , "is_login": fd.is_login
                        , "open_type": fd.open_type
                        , "title": fd.title
                      });

                      $('.puicon').find('i').addClass(fd.icon);

                      form.render(null, 'kaige_form_lay_filter');
                      iconpick.pickinit('puicon', 'ipicon');
                      treelist();
                      form.on('submit(kaige_form_btn_save)', function (data) {
                        var od = data.field;
                        var updata = {
                          icon: od.icon,
                          menu_id: od.menu_id,
                          p_menu_id: od.p_menu_id,
                          name: od.name,
                          params: od.params,
                          width: od.width,
                          height: od.height,
                          sort: od.sort,
                          is_left: od.is_left,
                          is_lock: od.is_lock,
                          open_type: od.open_type,
                          id: od.id,
                          title: od.title
                        };
                        $.post('/sys.menu/edit', updata, function (res2) {
                          if (res2.status) {
                            layer.msg(res2.msg, { time: 1300 }, function () {
                              table.reload('menuTable');
                              layer.close(index);
                            });
                          } else {
                            layer.msg(res2.msg);
                          }
                        });
                        return false;
                      });
                    } else {
                      layer.msg(res.msg);
                      return false;
                    }
                  });
                },
              });
            }
          });
        }

        //模块树形
        function treelist() {
          var mdata = tableTree.getDataOri();
          treeTable.render({
            elem: '#treemenu',
            data: mdata,
            icon_key: 'name',
            top_value: '10',
            primary_key: 'menu_id',
            parent_key: 'p_menu_id',
            cols: [
              {
                key: 'name', title: '名称', template: function (item) {
                  return get_icon(item.icon) + item.name;
                }
              },
            ],
            end: function (e) {
            },
          });
          $('#treemenu [data-down]').on('click', function (e) {
            $('#p_menu_id_name').val($(this).text());
            $('#p_menu_id_id').val($(this).parent().attr('data-id'));
          });

          //点击展开
          $('#menusel').click(function () {
            $(this).parent().hasClass('layui-form-selected') ? $(this).next().hide() : $(this).next().show(), $(this).parent().toggleClass('layui-form-selected');
          });
          $(document).on("click", function (i) {
            !$(i.target).parent().hasClass('layui-select-title') && !$(i.target).parents('table').length && !(!$(i.target).parents('table').length && $(i.target).hasClass('layui-icon')) && $("#menu_select").removeClass("layui-form-selected").find('.layui-anim').hide();
          });
        }

        function switchListening() {
          var arr = ['is_left', 'is_lock', 'is_extend'];
          $(arr).each(function (i, sval) {
            form.on('switch(' + sval + ')', function (data) {
              var that = $(data.elem), id = that.attr('data-id'), old = that.attr('data-old');
              var updata = {
                id: id,
                field: sval,
                value: data.elem.checked ? 1 : 0
              };
              $.post('/sys.menu/updatefield', updata, function (res) {
                layer.tips(res.msg, data.othis, { tips: 2 });
              });
            });
          });
        }

        // 监听 check
        switchListening();

        //监听单元格
        table.on('edit(menuTable)', function (obj) {
          var tr = obj.tr,
            that = $(tr).find("td[data-field='" + obj.field + "']");
          if (obj.field != 'sort') return false;
          var updata = {
            'id': obj.data.id,
            'field': obj.field,
            'value': obj.value
          };
          $.post('/sys.menu/updatefield', updata, function (res) {
            layer.tips(res.msg, that[0], { time: 1000, tips: 1 });
          });
        });
      });
    });
  </script>
</body>

</html>